<!DOCTYPE HTML>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>easykanban</title>
		
        <link type="text/css" rel="stylesheet" href="../css/main.css" />
		<link type="text/css" rel="stylesheet" href="../css/quadro.css" />
        
		<script>
			function allowDrop(ev)
			{
				ev.preventDefault();
			}
		
			function drag(ev)
			{
				// Quando o usuário inicia um drag, guardamos no dataset do evento 
				// o id do objeto sendo arrastado
				ev.dataTransfer.setData("ID",ev.target.id);
			}
		
			// Quando o usuário arrasta sobre um dos painéis, retornamos 
			// false para que o evento não se propague para o navegador, o 
			// que faria com que o conteúdo fosse selecionado. 30 
			function dragOver(ev) { return false; } 
		
			function drop(ev)
			{
				ev.preventDefault();
				var data=ev.dataTransfer.getData("ID");
				ev.target.appendChild(document.getElementById(data));
			}
        </script>
        
	</head>
	
	<body>
        <div id="container-cabecalho">
        <header>
        	<label> Nome do Projeto </label>
			<div id="perfil">
            	<label> Nome Usuário </label>
            	<img src="../images/zoom.png" alt="Alicar Zoom nas letras do Sistema">
            </div>		
        </header>
        </div>
        
        <div id="container-menu">
            <div id="nova-tarefa" >
           		<form action="../tarefas/tarefa.html">
                	<input name="Nova Tarefa" type="submit" class="orange_button" value=" + Nova Tarefa " >
                </form>
            </div>
    </div>
        
		<div id="div_quadro">
			
            <div id="div_scroll_quadro">
            
                <div id="div_reserva" class="quadro" ondrop="drop(event)" ondragover="allowDrop(event)" >
                	<label class="texto" > BACKLOG </label> 
                    <div id="tarefa" draggable="true" ondragstart="drag(event)" > </div>
                    <div id="tarefa1" draggable="true" ondragstart="drag(event)" > </div>
                </div>
                
                <div id="div_solicitado" class="quadro" ondrop="drop(event)" ondragover="allowDrop(event)" >
                	<label class="texto"> REQUISITADO </label>
                    
                </div>
                
                <div id="div_processo" class="quadro" ondrop="drop(event)" ondragover="allowDrop(event)" >
                	<label class="texto"> EM PROCESSO </label>
                </div>
                
                <div id="div_feito" class="quadro" ondrop="drop(event)" ondragover="allowDrop(event)" >
                	<label class="texto"> CONCLUIDO </label>
                </div>
                
                <div id="div_arquivado" class="quadro" ondrop="drop(event)" ondragover="allowDrop(event)" >
                	<label class="texto"> ARQUIVADO </label>
                </div>
     		</div>
            
		</div>
       
	</body>
</html>
